<script lang="ts">
  import { defineComponent, getCurrentInstance, PropType } from '@vue/composition-api';
  import OtoButton from '@/components/common/oto-button.vue';
  import { DynamicTypeList } from '@/enum/dynamic.enum';

  export type RadioPropsType = {
    list: DynamicTypeList;
  };
  export default defineComponent({
    components: {
      OtoButton
    },
    props: {
      list: {
        type: Array as PropType<RadioPropsType['list']>,
        require: true,
        default: () => {
          return [
            {
              text: '只要同城',
              value: 1
            }
          ] as RadioPropsType['list'];
        }
      },
      value: {
        type: Number as PropType<number>,
        default: 0
      }
    },
    setup() {
      const current = getCurrentInstance();
      function change(value: number) {
        current?.emit('input', value);
      }
      return {
        change
      };
    }
  });
</script>
<template>
  <view class="radio">
    <template v-for="(item, index) in list">
      <oto-button
        class="radio-item"
        @click.stop="change(item.value)"
        :key="index"
        :customStyle="{
          width: '125rpx',
          fontSize: '28rpx',
          background: value === item.value ? '#81d8de' : '#ebebeb',
          color: value === item.value ? 'white' : 'black',
          borderRadius: '12rpx'
        }"
        >{{ item.text }}</oto-button
      >
    </template>
  </view>
</template>
<style lang="scss" scoped>
  .radio {
    display: flex;
    justify-content: center;
    .radio-item {
      margin-right: 20rpx;
    }
  }
</style>
